【React】PropTypes の複数種（型）指定

こんにちは、白石です。

複数種類の PropTypes が渡ってくる場合に書き方に迷ってしまったので、備忘録として残しておこうと思います。

PropTypes の場合

// 具体的に特定されている値の範囲でいずれか
optionalUnionData: PropTypes.oneOf(['News', 'Photos']),

// いずれかの型
optionalUnionData: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]),

Flow の場合

type optionalUnionData = string | number

HOC, recompose で書いたみた場合

type optionalUnionProps = {
  data: string | number
}

const optionalUnionComponent = (compose(setDisplayName('optionalUnionComponent'): HOC<
  *,
  optionalUnionProps
>)(({ data }) => {
  // something
})

Enum や Object の場合など UtilityTypes¹ を使ってみての書き方でも色々と出来そうですね！

参考